<template>
  <div class="col_form">
    <p
      class="color-666"
      style="line-height:35px"
    >{{title}}</p>
    <crop-upload
      v-if="type==='thirdHot'"
      class="w-100 img_bg"
      show-type="photo"
      :init-val="formData.backgroundImg"
      wrapper-width="359px"
      wrapper-height="215px"
      :img-width="690"
      :img-height="415"
      :photo-width="359"
      :photo-height="215"
      @setVal="(val)=>{formData.backgroundImg=val}"
    ></crop-upload>
    <crop-upload
      v-if="type==='bannerCol'"
      class="w-100 img_bg"
      show-type="photo"
      :init-val="formData.backgroundImg"
      wrapper-width="359px"
      wrapper-height="258px"
      :img-width="335"
      :img-height="240"
      :photo-width="359"
      :photo-height="258"
      @setVal="(val)=>{formData.backgroundImg=val}"
    ></crop-upload>
    <crop-upload
      v-if="type==='twoColGoods'"
      class="w-100 img_bg"
      show-type="photo"
      :init-val="formData.backgroundImg"
      wrapper-width="359px"
      wrapper-height="305px"
      :img-width="344"
      :img-height="292"
      :photo-width="359"
      :photo-height="305"
      @setVal="(val)=>{formData.backgroundImg=val}"
    ></crop-upload>
    <div class="input_wrapper">
      <div class="flex name">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>主标题</label>
        <el-input
          placeholder="请输入主标题"
          v-model="formData.title"
          clearable
        >
        </el-input>
      </div>
      <div class="flex name">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>副标题</label>
        <el-input
          placeholder="请输入副标题"
          v-model="formData.subtitle"
          clearable
        >
        </el-input>
      </div>
      <!-- <div class="flex price">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>链接</label>
        <el-input
          placeholder="请输入链接"
          v-model="formData.jumpUrl"
          clearable
        >
        </el-input>
      </div> -->
    </div>
    <template v-if="contentType==='goods'">
      <goods-link
        v-for="(item, index) in goodsList"
        :key="item.goods_id"
        :goods-data="item"
        :show-tool="true"
        @handleDelete="deleteGoods(index)"
        @upSort="upSort(index)"
        @downSort="downSort(index)"
      ></goods-link>
      <div
        v-if="goodsList.length < goodsNum"
        class="add-div"
        @click="openSelect"
      >
        <i class="el-icon-plus"></i>添加商品({{goodsList.length}}/{{goodsNum}})
      </div>
    </template>
    <template v-if="contentType==='img'">
      <el-row :gutter="20">
        <el-col :span="12">
          <crop-upload
            class="w-100 img_bg"
            show-type="photo"
            :is-square="true"
            :init-val="goods[0].imgurl"
            wrapper-width="170px"
            wrapper-height="170px"
            :photo-width="170"
            :photo-height="170"
            @setVal="(val)=>{goods[0].imgurl=val}"
          ></crop-upload>
        </el-col>
        <el-col :span="12">
          <crop-upload
            class="w-100 img_bg"
            show-type="photo"
            :is-square="true"
            :init-val="goods[1].imgurl"
            wrapper-width="170px"
            wrapper-height="170px"
            :photo-width="170"
            :photo-height="170"
            @setVal="(val)=>{goods[1].imgurl=val}"
          ></crop-upload>
        </el-col>
      </el-row>
    </template>
    <goods-dialog
      ref="goodsDialog"
      :multiple="true"
      :maxNum="goodsNum"
      :show-checked-tool="true"
      @setSelect="setSelect"
    ></goods-dialog>
  </div>
</template>

<script>
import goodsLink from "../../../recommend/compoments/goodsLink";
import goodsDialog from "@/components/goodsDialog.vue";
import cropUpload from "@/components/cropUpload";
export default {
  components: { goodsLink, goodsDialog, cropUpload },
  props: {
    contentType: {
      type: String,
      default: 'goods'
    },
    goodsNum: {
      type: Number
    },
    title: {
      type: String
    },
    formData: {
      type: Object,
      default: {}
    },
    type: {
      type: String
    }
  },
  data() {
    return {
      goodsList: [],
      goods: [
        {
          imgurl: ''
        },
        {
          imgurl: ''
        }
      ]
    }
  },
  methods: {
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true;
      this.$refs.goodsDialog.selectItems = [...this.goodsList];
    },
    // 设置选中
    setSelect(goodsList) {
      this.goodsList = goodsList;
    },
    // 升序
    upSort(index) {
      if (index === 0) {
        return;
      }
      let item = this.goodsList[index];
      this.$set(this.goodsList, index, this.goodsList[index - 1]);
      this.$set(this.goodsList, index - 1, item);
    },
    // 降序
    downSort(index) {
      if (index === this.goodsList.length - 1) {
        return;
      }
      let item = this.goodsList[index];
      this.$set(this.goodsList, index, this.goodsList[index + 1]);
      this.$set(this.goodsList, index + 1, item);
    },
    // 删除商品
    deleteGoods(index) {
      this.goodsList.splice(index, 1);
    },
  }
}
</script>

<style lang="scss" scoped>
.col_form {
  .input_wrapper {
    margin-top: 10px;
    margin-left: 0;
    & > div {
      label {
        width: 90px;
      }
    }
  }
}
</style>
